// 引入 css 样式
import "./index.css";
import { FC } from "react";
// 引入 阿里矢量图标
import { createFromIconfontCN } from "@ant-design/icons";
// axios 方法
import {
  getShoppingType,
  getShoppingList,
  ShoppingList,
} from "../../../api/admin";
// 引入 react 方法
import { useEffect, useState } from "react";
// 引入侧边导航栏
import { SideBar } from "antd-mobile";
// 引入路由方法
import { useNavigate } from "react-router-dom";
// 引入 store
import store from "store2";

let IconFont = createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/c/font_4148694_v0hr188vut.js",
});
interface CateProps {}

const Cate: FC<CateProps> = () => {
  // 定义空数组存储商品分类
  interface ShoppingTypeProps {
    id: number;
    coverImage: string;
    name: string;
  }
  const [shoppingType, setshoppingType] = useState<ShoppingTypeProps[]>([]);

  // 定义空数组存储商品列表
  interface ShoppingListProps {
    id: number;
    coverImage: string;
    name: string;
    price: number;
  }
  const [shoppingList, setshoppingList] = useState<ShoppingListProps[]>([]);

  // 定义商品分类名称
  const [activeKey, setActiveKey] = useState<any>("雕塑手办");

  const [id, setId] = useState(1);
  // get 请求参数
  const Shopping: ShoppingList = {
    page: 1,
    per: 12,
    category: id,
  };

  const [arr, setArr] = useState<any[]>([]);
  useEffect(() => {
    getShoppingType().then((res) => {
      setshoppingType(res.data.data);
      setArr(
        res.data.data
          .map((item: any) => {
            return { [item.name]: item.id };
          })
          .reduce((a: any, b: any) => {
            return { ...a, ...b };
          }, {})
      );
    });
  }, []);
  console.log(arr);
  useEffect(() => {
    setId(arr[activeKey]);
    getShoppingList(Shopping).then((res) => {
      console.log(res);
      setshoppingList(res.data.data);
    });
  }, [activeKey]);

  console.log(activeKey);

  // 点击跳转详情的函数
  const navigate = useNavigate();

  const jump = (i: number, p: number) => {
    store.set("shoppingId", i);
    store.set("shoppingPrice", p);
    navigate("/list");
  };
  const fn = () => {
    console.log(666);
  };
  return (
    <>
      <div className="Cate">
        {/* 头部组件 */}
        <div className="Search">
          <span>
            <IconFont type="icon-31fanhui1" />
          </span>
          <input
            type="text"
            readOnly
            value={"请输入商品名称"}
            onClick={() => navigate("/search")}
          />
          <span className="fangdajing">
            <IconFont type="icon-fangdajing2" />
          </span>
        </div>
        {/* 内容组件 */}
        <article>
          <div className="left">
            <SideBar activeKey={activeKey} onChange={setActiveKey}>
              {shoppingType.map((item) => (
                <SideBar.Item key={item.name} title={item.name} />
              ))}
            </SideBar>
          </div>
          <div className="right">
            <h5>{activeKey}</h5>
            {shoppingList.map((item) => (
              <li onClick={() => jump(item.id, item.price)} key={item.id}>
                <img src={item.coverImage} alt="" />
                <p>{item.name}</p>
              </li>
            ))}
          </div>
        </article>
      </div>
    </>
  );
};

export default Cate;
